<template>
  <div>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
<!--            <el-form-item label="提现日期类型：">-->
<!--              <span v-if="props.row.type === 1">每周提现</span>-->
<!--              <span v-if="props.row.type === 2">按月提现</span>-->
<!--            </el-form-item>-->
<!--            <el-form-item label="日期：">-->
<!--              <span v-if="props.row.type === 1">-->
<!--                <span v-if="props.row.value === 1">每周一</span>-->
<!--                <span v-if="props.row.value === 2">每周二</span>-->
<!--                <span v-if="props.row.value === 3">每周三</span>-->
<!--                <span v-if="props.row.value === 4">每周四</span>-->
<!--                <span v-if="props.row.value === 5">每周五</span>-->
<!--                <span v-if="props.row.value === 6">每周六</span>-->
<!--                <span v-if="props.row.value === 7">每周日</span>-->
<!--              </span>-->
<!--              <span v-if="props.row.type === 2">每月{{ props.row.value }}日</span>-->
<!--            </el-form-item>-->
            <el-form-item label="提现方式：">
              <span v-if="props.row.drawType === 1">按比例提现</span>
              <span v-if="props.row.drawType === 2">固定金额提现</span>
            </el-form-item>
            <el-form-item label="比例：" v-if="props.row.drawType === 1">
              <span>¥{{ props.row.ratio }}%</span>
            </el-form-item>
            <el-form-item label="金额：" v-if="props.row.drawType === 2">
              <span>{{ props.row.ratio }}</span>
            </el-form-item>
            <el-form-item label="单笔最低提现额度：">
              <span>¥{{ props.row.minDraw }}</span>
            </el-form-item>
            <el-form-item label="每日最高提现额度：">
              <span>¥{{ props.row.maxDraw }}</span>
            </el-form-item>
            <el-form-item label="自动结算天数：">
              <span>{{ props.row.confirmDay }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column
        label="商铺名"
        prop="shopName">
      </el-table-column>
      <!--<el-table-column-->
      <!--label="提现日期"-->
      <!--prop="name">-->
      <!--</el-table-column>-->
      <el-table-column
        label="单笔最低限额"
        prop="minDraw">
      </el-table-column>
      <el-table-column
        label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.row.shopId)">编辑
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <div style="margin-top: 20px;text-align: right">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 50, 100, 200]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        background>
      </el-pagination>
    </div>

    <el-dialog
      title="编辑"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose">
      <branch ref="branch" v-on:handlerDisableDialog="handlerDisableDialog"></branch>
    </el-dialog>
  </div>
</template>
<script>
  import {getAll} from '@/api/delivery/config'
  import Branch from '@/components/config/branch'

  export default {
    components: {
      Branch
    },
    data() {
      return {
        tableData: [],
        dialogVisible: false,
        currentPage: 1,
        pageSize: 20,
        total: 0
      }
    },
    mounted() {
      this.getList()
    },
    methods: {
      getList() {
        getAll(Object.assign({
          current: this.currentPage,
          size: this.pageSize
        })).then(res => {
          this.tableData = res.data.data.records
          this.total = res.data.data.total
        })
      },
      handleEdit(id) {
        this.dialogVisible = true
        this.$nextTick(() => {
          this.$refs.branch.getList(id)
        })
      },
      handleClose() {
        this.dialogVisible = false
      },
      handleSizeChange(val) {
        this.pageSize = val
        this.getList()
      },
      handleCurrentChange(val) {
        this.currentPage = val
        this.getList()
      },
      handlerDisableDialog() {
        this.dialogVisible = false
        this.getList()
      }
    }
  }
</script>

<style lang="scss" scoped>
  .demo-table-expand {
    font-size: 0;
  }

  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }

  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>
